import {
    Input,
    InputNumber,
    Select,
    Radio,
    Card,
    Button,
    Tree,
    Tooltip,
    Popconfirm
} from 'antd'

import {
    DEVcolumnResizingMode,
    IsAllowMapping,
    IsYeasMapping,
    IsEnableMapping,
    IsHiddenMapping,
    SelectionMethodMapping,
    DEVfilterRowApplyFilter,
    DEVselectionSelectAllMode,
    DEVselectionShowCheckBoxesMode,
    DEVcolumnChooserMode,
    DEVgroupingExpandMode,
    DEVRowHeaderLayoutMapping,
    DEVShowTotalsPrior,
    DEVDataFieldArea,
    DEVFieldChooserLayout,
    DEVApplyChangesMode,
    SummaryTypeMapping,
    AlignmentMapping,
    DEVTypeMapping
} from '../Config/theme'

import { useEventEmitter } from 'ahooks'

import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'

import { removeTreeByKey } from '../Utils'
import { DefaultTableConfig } from '../Config'
import { menuStore, modelStore } from '../Config/zustand'

const MenuConfigTable = () => {
    const { tableConfig, updateTableConfig } = menuStore()
    const { updateModel } = modelStore()

    const selectTable = (value) => {
        updateTableConfig(DefaultTableConfig[value])
    }

    const configCheng = (field, value) => {
        tableConfig[field] = value
        updateTableConfig(tableConfig)
    }

    const onMidfy = (type, index, field, data) => {
        tableConfig[type][index][field] = data
        updateTableConfig(tableConfig)
    }

    const onDelete = (type, index) => {
        tableConfig[type] = tableConfig[type].filter((_, key) => key !== index)
        updateTableConfig(tableConfig)
    }

    const onAdd = (type) => {
        tableConfig[type].push({})
        updateTableConfig(tableConfig)
    }

    const MultilayerEvent = useEventEmitter()
    MultilayerEvent.useSubscription(val => {
        tableConfig.multilayerConfig = val
        updateTableConfig(tableConfig)
    })

    const onAddMultilayer = (key) => updateModel({ title: '编辑多层列头', type: 'MultilayerModify', width: '600px', data: { config: tableConfig.multilayerConfig, key, MultilayerEvent } })

    const onDelMultilayer = (key) => {
        tableConfig.multilayerConfig = removeTreeByKey(tableConfig.multilayerConfig, key, 'key')
        updateTableConfig(tableConfig)
    }


    const onDrop = (info) => {
        console.log(info);
        const dropKey = info.node.key;
        const dragKey = info.dragNode.key;
        const dropPos = info.node.pos.split('-');
        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
        const loop = (data, key, callback) => {
            for (let i = 0; i < data.length; i++) {
                if (data[i].key === key) { return callback(data[i], i, data) }
                if (data[i].children) { loop(data[i].children, key, callback) }
            }
        };
        const data = [...tableConfig.multilayerConfig]

        let dragObj
        loop(data, dragKey, (item, index, arr) => {
            arr.splice(index, 1)
            dragObj = item
        })
        if (!info.dropToGap) {
            loop(data, dropKey, (item) => {
                item.children = item.children || []
                item.children.unshift(dragObj)
            })
        } else {
            let ar = [], i
            loop(data, dropKey, (_item, index, arr) => {
                ar = arr
                i = index
            })
            if (dropPosition === -1) { ar.splice(i, 0, dragObj) }
            else { ar.splice(i + 1, 0, dragObj) }
        }
        tableConfig.multilayerConfig = data
        updateTableConfig(tableConfig)
    };


    return (
        <div className='MenuConfigitem MenuConfigTable'>
            <div className='Label' >
                <div>表格类型</div>
                <Radio.Group buttonStyle="solid" value={tableConfig.tableType} onChange={e => selectTable(e.target.value)}>
                    {DEVTypeMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                </Radio.Group>
            </div>
            {tableConfig.tableType === 'data' &&
                <div className='Content'>
                    <div>
                        <div className='Title'>基础信息</div>
                        <div className='Label' >
                            <div>重新排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowColumnReordering} onChange={e => configCheng('allowColumnReordering', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列标题</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnHeaders} onChange={e => configCheng('showColumnHeaders', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列最小宽度</div>
                            <InputNumber value={tableConfig.columnMinWidth} onChange={e => configCheng('columnMinWidth', e)} />
                        </div>
                        <div className='Label' >
                            <div>自动宽度</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnAutoWidth} onChange={e => configCheng('columnAutoWidth', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>调整列宽</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowColumnResizing} onChange={e => configCheng('allowColumnResizing', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列宽状态</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnResizingMode} onChange={e => configCheng('columnResizingMode', e.target.value)}>
                                {DEVcolumnResizingMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>动态摘要</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.repaintChangesOnly} onChange={e => configCheng('repaintChangesOnly', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>聚焦选中</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.focusedRowEnabled} onChange={e => configCheng('focusedRowEnabled', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>外边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showBorders} onChange={e => configCheng('showBorders', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>底边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showRowLines} onChange={e => configCheng('showRowLines', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>竖边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnLines} onChange={e => configCheng('showColumnLines', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>斑马格</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.rowAlternationEnabled} onChange={e => configCheng('rowAlternationEnabled', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>

                        <div className='Title'>额外组件</div>
                        <div className='Label' >
                            <div>固定列</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnFixing} onChange={e => configCheng('columnFixing', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>头部搜索框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.searchPanel} onChange={e => configCheng('searchPanel', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行内筛选器</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.headerFilter} onChange={e => configCheng('headerFilter', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行内排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.sorting} onChange={e => configCheng('sorting', e.target.value)}>
                                {SelectionMethodMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>操作列</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnDlyState} onChange={e => configCheng('columnDlyState', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>操作列宽度</div>
                            <InputNumber value={tableConfig.columnDlyWidth} onChange={e => configCheng('columnDlyWidth', e)} />
                        </div>
                        <div className='Title'>行头筛选</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.filterRow} onChange={e => configCheng('filterRow', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.filterRowApplyFilter} onChange={e => configCheng('filterRowApplyFilter', e.target.value)}>
                                {DEVfilterRowApplyFilter.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>导出功能</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.export} onChange={e => configCheng('export', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>全部导出</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.exportAllowExportSelectedData} onChange={e => configCheng('exportAllowExportSelectedData', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>选中数据</div>
                        <div className='Label' >
                            <div>选中方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionMode} onChange={e => configCheng('selectionMode', e.target.value)}>
                                {SelectionMethodMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>选择方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionShowCheckBoxesMode} onChange={e => configCheng('selectionShowCheckBoxesMode', e.target.value)}>
                                {DEVselectionShowCheckBoxesMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>是否全选</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionAllowSelectAll} onChange={e => configCheng('selectionAllowSelectAll', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>全选方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionSelectAllMode} onChange={e => configCheng('selectionSelectAllMode', e.target.value)}>
                                {DEVselectionSelectAllMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>列选择器</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooser} onChange={e => configCheng('columnChooser', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>选择模式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserMode} onChange={e => configCheng('columnChooserMode', e.target.value)}>
                                {DEVcolumnChooserMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索窗口</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSearch} onChange={e => configCheng('columnChooserSearch', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索框提示</div>
                            <Input value={tableConfig.columnChooserSearchPlaceholder} onChange={e => configCheng('columnChooserSearchPlaceholder', e.target.value)} />
                        </div>
                        <div className='Label' >
                            <div>全选按钮</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionAll} onChange={e => configCheng('columnChooserSelectionAll', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>单机选择</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionClick} onChange={e => configCheng('columnChooserSelectionClick', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>递归加载</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionRecursive} onChange={e => configCheng('columnChooserSelectionRecursive', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>

                        <div className='Title'>数据分组</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupPanel} onChange={e => configCheng('groupPanel', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>自动展开</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupPanelAutoExpandAll} onChange={e => configCheng('groupPanelAutoExpandAll', e.target.value)}>
                                {IsYeasMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>取消分组</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupPanelAutoExpandAll} onChange={e => configCheng('groupPanelAutoExpandAll', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>展开方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingExpandMode} onChange={e => configCheng('groupingExpandMode', e.target.value)}>
                                {DEVgroupingExpandMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>右键菜单</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingContextMenuEnabled} onChange={e => configCheng('groupingContextMenuEnabled', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>分组自动展开</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingAutoExpandAll} onChange={e => configCheng('groupingAutoExpandAll', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>允许折叠 ( 禁用后只能程序操作 )</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingAllowCollapsing} onChange={e => configCheng('groupingAllowCollapsing', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>总计摘要</div>
                        {tableConfig.totalSummary.map(({ column, summaryType, customizeText, showInColumn, alignment, valueFormat }, index) =>
                            <Card className='ContentCar' key={index}>
                                <div className='Title'> 总计 {index + 1} </div>
                                <DeleteOutlined className='Delete' onClick={() => onDelete('totalSummary', index)} />
                                <div className='Label' >
                                    <div>统计字段</div>
                                    <Input value={column} onChange={e => onMidfy('totalSummary', index, 'column', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>统计方式</div>
                                    <Select value={summaryType} options={SummaryTypeMapping} onChange={e => onMidfy('totalSummary', index, 'summaryType', e)} />
                                </div>
                                <div className='Label' >
                                    <div>描述文字</div>
                                    <Input value={customizeText} onChange={e => onMidfy('totalSummary', index, 'customizeText', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>显示位置</div>
                                    <Input value={showInColumn} onChange={e => onMidfy('totalSummary', index, 'showInColumn', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>排列方式</div>
                                    <Radio.Group value={alignment} buttonStyle="solid" onChange={e => onMidfy('totalSummary', index, 'alignment', e.target.value)}>
                                        {AlignmentMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                                    </Radio.Group>
                                </div>
                                <div className='Label' >
                                    <div>格式化</div>
                                    <Input value={valueFormat} onChange={e => onMidfy('totalSummary', index, 'valueFormat', e.target.value)} />
                                </div>
                            </Card>
                        )}
                        <Button block type="dashed" icon={<PlusOutlined />} onClick={() => onAdd('totalSummary')}>追加总计摘要</Button>
                        <div className='Title'>分组摘要</div>
                        {tableConfig.groupSummary.map(({ column, summaryType, customizeText, valueFormat }, index) =>
                            <Card className='ContentCar' key={index}>
                                <div className='Title'> 分组 {index + 1} </div>
                                <DeleteOutlined className='Delete' onClick={() => onDelete('groupSummary', index)} />
                                <div className='Label' >
                                    <div>统计字段</div>
                                    <Input value={column} onChange={e => onMidfy('groupSummary', index, 'column', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>统计方式</div>
                                    <Select value={summaryType} options={SummaryTypeMapping} onChange={e => onMidfy('groupSummary', index, 'summaryType', e)} />
                                </div>
                                <div className='Label' >
                                    <div>描述文字</div>
                                    <Input value={customizeText} onChange={e => onMidfy('groupSummary', index, 'customizeText', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>格式化</div>
                                    <Input value={valueFormat} onChange={e => onMidfy('groupSummary', index, 'valueFormat', e.target.value)} />
                                </div>
                            </Card>
                        )}
                        <Button block type="dashed" icon={<PlusOutlined />} onClick={() => onAdd('groupSummary')}>追加分组摘要</Button>
                    </div>
                </div>
            }
            {tableConfig.tableType === 'multilayer' &&
                <div className='Content'>
                    <div>
                        <div className='Title'>基础信息</div>
                        <div className='Label' >
                            <div>重新排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowColumnReordering} onChange={e => configCheng('allowColumnReordering', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列标题</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnHeaders} onChange={e => configCheng('showColumnHeaders', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列最小宽度</div>
                            <InputNumber value={tableConfig.columnMinWidth} onChange={e => configCheng('columnMinWidth', e)} />
                        </div>
                        <div className='Label' >
                            <div>自动宽度</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnAutoWidth} onChange={e => configCheng('columnAutoWidth', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>调整列宽</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowColumnResizing} onChange={e => configCheng('allowColumnResizing', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列宽状态</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnResizingMode} onChange={e => configCheng('columnResizingMode', e.target.value)}>
                                {DEVcolumnResizingMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>动态摘要</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.repaintChangesOnly} onChange={e => configCheng('repaintChangesOnly', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>聚焦选中</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.focusedRowEnabled} onChange={e => configCheng('focusedRowEnabled', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>外边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showBorders} onChange={e => configCheng('showBorders', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>底边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showRowLines} onChange={e => configCheng('showRowLines', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>竖边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnLines} onChange={e => configCheng('showColumnLines', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>斑马格</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.rowAlternationEnabled} onChange={e => configCheng('rowAlternationEnabled', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>额外组件</div>
                        <div className='Label' >
                            <div>固定列</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnFixing} onChange={e => configCheng('columnFixing', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>头部搜索框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.searchPanel} onChange={e => configCheng('searchPanel', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行内筛选器</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.headerFilter} onChange={e => configCheng('headerFilter', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行内排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.sorting} onChange={e => configCheng('sorting', e.target.value)}>
                                {SelectionMethodMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>操作列</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnDlyState} onChange={e => configCheng('columnDlyState', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>操作列宽度</div>
                            <InputNumber value={tableConfig.columnDlyWidth} onChange={e => configCheng('columnDlyWidth', e)} />
                        </div>
                        <div className='Title'>行头筛选</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.filterRow} onChange={e => configCheng('filterRow', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.filterRowApplyFilter} onChange={e => configCheng('filterRowApplyFilter', e.target.value)}>
                                {DEVfilterRowApplyFilter.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>导出功能</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.export} onChange={e => configCheng('export', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>全部导出</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.exportAllowExportSelectedData} onChange={e => configCheng('exportAllowExportSelectedData', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>选中数据</div>
                        <div className='Label' >
                            <div>选中方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionMode} onChange={e => configCheng('selectionMode', e.target.value)}>
                                {SelectionMethodMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>选择方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionShowCheckBoxesMode} onChange={e => configCheng('selectionShowCheckBoxesMode', e.target.value)}>
                                {DEVselectionShowCheckBoxesMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>是否全选</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionAllowSelectAll} onChange={e => configCheng('selectionAllowSelectAll', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>全选方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionSelectAllMode} onChange={e => configCheng('selectionSelectAllMode', e.target.value)}>
                                {DEVselectionSelectAllMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>列选择器</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooser} onChange={e => configCheng('columnChooser', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>选择模式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserMode} onChange={e => configCheng('columnChooserMode', e.target.value)}>
                                {DEVcolumnChooserMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索窗口</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSearch} onChange={e => configCheng('columnChooserSearch', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索框提示</div>
                            <Input value={tableConfig.columnChooserSearchPlaceholder} onChange={e => configCheng('columnChooserSearchPlaceholder', e.target.value)} />
                        </div>
                        <div className='Label' >
                            <div>全选按钮</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionAll} onChange={e => configCheng('columnChooserSelectionAll', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>单机选择</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionClick} onChange={e => configCheng('columnChooserSelectionClick', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>递归加载</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionRecursive} onChange={e => configCheng('columnChooserSelectionRecursive', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>数据分组</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupPanel} onChange={e => configCheng('groupPanel', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>自动展开</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupPanelAutoExpandAll} onChange={e => configCheng('groupPanelAutoExpandAll', e.target.value)}>
                                {IsYeasMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>取消分组</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupPanelAutoExpandAll} onChange={e => configCheng('groupPanelAutoExpandAll', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>展开方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingExpandMode} onChange={e => configCheng('groupingExpandMode', e.target.value)}>
                                {DEVgroupingExpandMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>右键菜单</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingContextMenuEnabled} onChange={e => configCheng('groupingContextMenuEnabled', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>分组自动展开</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingAutoExpandAll} onChange={e => configCheng('groupingAutoExpandAll', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>允许折叠 ( 禁用后只能程序操作 )</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.groupingAllowCollapsing} onChange={e => configCheng('groupingAllowCollapsing', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>总计摘要</div>
                        {tableConfig.totalSummary.map(({ column, summaryType, customizeText, showInColumn, alignment }, index) =>
                            <Card className='ContentCar' key={index}>
                                <div className='Title'> 总计 {index + 1} </div>
                                <DeleteOutlined className='Delete' onClick={() => onDelete('totalSummary', index)} />
                                <div className='Label' >
                                    <div>统计字段</div>
                                    <Input value={column} onChange={e => onMidfy('totalSummary', index, 'column', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>统计方式</div>
                                    <Select value={summaryType} options={SummaryTypeMapping} onChange={e => onMidfy('totalSummary', index, 'summaryType', e)} />
                                </div>
                                <div className='Label' >
                                    <div>描述文字</div>
                                    <Input value={customizeText} onChange={e => onMidfy('totalSummary', index, 'customizeText', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>显示位置</div>
                                    <Input value={showInColumn} onChange={e => onMidfy('totalSummary', index, 'showInColumn', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>排列方式</div>
                                    <Radio.Group value={alignment} buttonStyle="solid" onChange={e => onMidfy('totalSummary', index, 'alignment', e.target.value)}>
                                        {AlignmentMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                                    </Radio.Group>
                                </div>
                            </Card>
                        )}
                        <Button block type="dashed" icon={<PlusOutlined />} onClick={() => onAdd('totalSummary')}>追加总计摘要</Button>
                        <div className='Title'>分组摘要</div>
                        {tableConfig.groupSummary.map(({ column, summaryType, customizeText }, index) =>
                            <Card className='ContentCar' key={index}>
                                <div className='Title'> 分组 {index + 1} </div>
                                <DeleteOutlined className='Delete' onClick={() => onDelete('groupSummary', index)} />
                                <div className='Label' >
                                    <div>统计字段</div>
                                    <Input value={column} onChange={e => onMidfy('groupSummary', index, 'column', e.target.value)} />
                                </div>
                                <div className='Label' >
                                    <div>统计方式</div>
                                    <Select value={summaryType} options={SummaryTypeMapping} onChange={e => onMidfy('groupSummary', index, 'summaryType', e)} />
                                </div>
                                <div className='Label' >
                                    <div>描述文字</div>
                                    <Input value={customizeText} onChange={e => onMidfy('groupSummary', index, 'customizeText', e.target.value)} />
                                </div>
                            </Card>
                        )}
                        <Button block type="dashed" icon={<PlusOutlined />} onClick={() => onAdd('groupSummary')}>追加分组摘要</Button>

                        <div className='Title'>多层列头</div>
                        <Tree
                            className='multilayerTree'
                            key={new Date().getTime()}
                            draggable
                            blockNode
                            selectable={false}
                            defaultExpandAll
                            treeData={tableConfig.multilayerConfig || []}
                            onDrop={onDrop}
                            titleRender={e => (
                                <div key={e.key} className='TreeItem'>
                                    <div className='Item__Title'>
                                        <div><span>({e.caption ? '分组' : '字段'}) </span>{e.title}  </div>
                                    </div>
                                    <div className='Item__Btn'>
                                        <Tooltip title="向下追加" placement='left'>
                                            <PlusOutlined onClick={() => onAddMultilayer(e.key)} />
                                        </Tooltip>
                                        {/* <Tooltip title="修改" >
                                            <EditOutlined onClick={() => onModifyMultilayer(e.key)} />
                                        </Tooltip> */}
                                        <Popconfirm
                                            title="删除警告"
                                            description="是否要删除当前字段?"
                                            onConfirm={() => onDelMultilayer(e.key)}
                                            okText="删除"
                                            cancelText="取消"
                                        >
                                            <Tooltip title="删除" placement='right'>
                                                <DeleteOutlined style={{ color: '#f5222d' }} />
                                            </Tooltip>
                                        </Popconfirm>
                                    </div>
                                </div>
                            )}
                        />
                        <Button block type="dashed" icon={<PlusOutlined />} onClick={() => onAddMultilayer()}>添加分组</Button>
                    </div>
                </div>
            }

            {tableConfig.tableType === 'tree' &&
                <div className='Content'>
                    <div>
                        <div className='Title'>基础信息</div>
                        <div className='Label' >
                            <div>节点键值</div>
                            <Input value={tableConfig.itemsExpr} onChange={e => configCheng('itemsExpr', e.target.value)} />
                        </div>
                        <div className='Label' >
                            <div>重新排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowColumnReordering} onChange={e => configCheng('allowColumnReordering', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列标题</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnHeaders} onChange={e => configCheng('showColumnHeaders', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列最小宽度</div>
                            <InputNumber value={tableConfig.columnMinWidth} onChange={e => configCheng('columnMinWidth', e)} />
                        </div>
                        <div className='Label' >
                            <div>自动宽度</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnAutoWidth} onChange={e => configCheng('columnAutoWidth', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>调整列宽</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowColumnResizing} onChange={e => configCheng('allowColumnResizing', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列宽状态</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnResizingMode} onChange={e => configCheng('columnResizingMode', e.target.value)}>
                                {DEVcolumnResizingMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>动态摘要</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.repaintChangesOnly} onChange={e => configCheng('repaintChangesOnly', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>聚焦选中</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.focusedRowEnabled} onChange={e => configCheng('focusedRowEnabled', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>外边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showBorders} onChange={e => configCheng('showBorders', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>底边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showRowLines} onChange={e => configCheng('showRowLines', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>竖边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnLines} onChange={e => configCheng('showColumnLines', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>斑马格</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.rowAlternationEnabled} onChange={e => configCheng('rowAlternationEnabled', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>额外组件</div>
                        <div className='Label' >
                            <div>固定列</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnFixing} onChange={e => configCheng('columnFixing', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>头部搜索框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.searchPanel} onChange={e => configCheng('searchPanel', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行内筛选器</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.headerFilter} onChange={e => configCheng('headerFilter', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行内排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.sorting} onChange={e => configCheng('sorting', e.target.value)}>
                                {SelectionMethodMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>行头筛选</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.filterRow} onChange={e => configCheng('filterRow', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.filterRowApplyFilter} onChange={e => configCheng('filterRowApplyFilter', e.target.value)}>
                                {DEVfilterRowApplyFilter.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>选中数据</div>
                        <div className='Label' >
                            <div>选中方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionMode} onChange={e => configCheng('selectionMode', e.target.value)}>
                                {SelectionMethodMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>选择方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionShowCheckBoxesMode} onChange={e => configCheng('selectionShowCheckBoxesMode', e.target.value)}>
                                {DEVselectionShowCheckBoxesMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>是否全选</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionAllowSelectAll} onChange={e => configCheng('selectionAllowSelectAll', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>全选方式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.selectionSelectAllMode} onChange={e => configCheng('selectionSelectAllMode', e.target.value)}>
                                {DEVselectionSelectAllMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>操作列</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnDlyState} onChange={e => configCheng('columnDlyState', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>操作列宽度</div>
                            <InputNumber value={tableConfig.columnDlyWidth} onChange={e => configCheng('columnDlyWidth', e)} />
                        </div>

                        <div className='Title'>列选择器</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooser} onChange={e => configCheng('columnChooser', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>选择模式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserMode} onChange={e => configCheng('columnChooserMode', e.target.value)}>
                                {DEVcolumnChooserMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索窗口</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSearch} onChange={e => configCheng('columnChooserSearch', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>搜索框提示</div>
                            <Input value={tableConfig.columnChooserSearchPlaceholder} onChange={e => configCheng('columnChooserSearchPlaceholder', e.target.value)} />
                        </div>
                        <div className='Label' >
                            <div>全选按钮</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionAll} onChange={e => configCheng('columnChooserSelectionAll', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>单机选择</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionClick} onChange={e => configCheng('columnChooserSelectionClick', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>递归加载</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.columnChooserSelectionRecursive} onChange={e => configCheng('columnChooserSelectionRecursive', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                </div>
            }
            {tableConfig.tableType === 'olap' &&
                <div className='Content'>
                    <div>
                        <div className='Title'>关联信息</div>
                        <div className='Label' >
                            <div>菜单路径</div>
                            <Input value={tableConfig.pageUrl} onChange={e => configCheng('pageUrl', e.target.value)} />
                        </div>
                        <div className='Title'>基础信息</div>
                        <div className='Label' >
                            <div>是否排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowSorting} onChange={e => configCheng('allowSorting', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>是否排序</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowSortingBySummary} onChange={e => configCheng('allowSortingBySummary', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>筛选器</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowFiltering} onChange={e => configCheng('allowFiltering', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>全部展开</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowExpandAll} onChange={e => configCheng('allowExpandAll', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>表格边框</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.allowExpandAll} onChange={e => configCheng('allowExpandAll', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>数据导出</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.export} onChange={e => configCheng('export', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>字段面板</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldPanelVisible} onChange={e => configCheng('fieldPanelVisible', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>拖动字段</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldPanelAllowFieldDragging} onChange={e => configCheng('fieldPanelAllowFieldDragging', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列字段</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldPanelShowColumnFields} onChange={e => configCheng('fieldPanelShowColumnFields', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行字段</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldPanelShowRowFields} onChange={e => configCheng('fieldPanelShowRowFields', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>数据字段</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldPanelShowDataFields} onChange={e => configCheng('fieldPanelShowDataFields', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>过滤字段</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldPanelShowFilterFields} onChange={e => configCheng('fieldPanelShowFilterFields', e.target.value)}>
                                {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                    <div>
                        <div className='Title'>布局设置</div>
                        <div className='Label' >
                            <div>布局方式</div>
                            <Select value={tableConfig.rowHeaderLayout} options={DEVRowHeaderLayoutMapping} onChange={e => configCheng('rowHeaderLayout', e)} />
                        </div>
                        <div className='Label' >
                            <div>总计位置</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showTotalsPrior} onChange={e => configCheng('showTotalsPrior', e.target.value)}>
                                {DEVShowTotalsPrior.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行分组统计</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnTotals} onChange={e => configCheng('showColumnTotals', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>行全部统计</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showColumnGrandTotals} onChange={e => configCheng('showColumnGrandTotals', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列分组统计</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showRowTotals} onChange={e => configCheng('showRowTotals', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>列全部统计</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.showRowGrandTotals} onChange={e => configCheng('showRowGrandTotals', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>字段位置</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.dataFieldArea} onChange={e => configCheng('dataFieldArea', e.target.value)}>
                                {DEVDataFieldArea.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Title'>中控开关</div>
                        <div className='Label' >
                            <div>是否启用</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldChooserEnabled} onChange={e => configCheng('fieldChooserEnabled', e.target.value)}>
                                {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>面板标题</div>
                            <Input value={tableConfig.fieldChooserTitle} onChange={e => configCheng('fieldChooserTitle', e.target.value)} />
                        </div>
                        <div className='Label' >
                            <div>面板布局</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldChooserLayout} onChange={e => configCheng('fieldChooserLayout', e.target.value)}>
                                {DEVFieldChooserLayout.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>字段搜索</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldChooserAllowSearch} onChange={e => configCheng('fieldChooserAllowSearch', e.target.value)}>
                                {IsAllowMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                        <div className='Label' >
                            <div>应用模式</div>
                            <Radio.Group buttonStyle="solid" value={tableConfig.fieldChooserApplyChangesMode} onChange={e => configCheng('fieldChooserApplyChangesMode', e.target.value)}>
                                {DEVApplyChangesMode.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                            </Radio.Group>
                        </div>
                    </div>
                </div>
            }



            {!tableConfig.tableType && <div>请先选择表格类型</div>}
        </div>
    )
}

export default MenuConfigTable;